<template>
    <div class="dashboard-container">
        <div class="dashboard-content">
            <!-- 开发环境下显示的图标调试区域 -->
            <el-card v-if="isDev" style="margin-bottom: 20px;">
                <div slot="header" class="clearfix">
                    <span>图标调试 (仅开发环境可见)</span>
                </div>
                <div>
                    <h4>系统使用的菜单图标</h4>
                    <div class="icon-list">
                        <div class="icon-item" v-for="(icon, name) in menuIcons" :key="name">
                            <i :class="icon"></i>
                            <div class="icon-name">{{ name }}</div>
                            <div class="icon-class">{{ icon }}</div>
                        </div>
                    </div>
                </div>
            </el-card>

            <el-row :gutter="20">
                <el-col :span="6">
                    <el-card>
                        <div slot="header" class="clearfix">
                            <span>商品总数</span>
                        </div>
                        <div class="card-panel">
                            <div class="card-panel-icon">
                                <i class="el-icon-s-goods"></i>
                            </div>
                            <div class="card-panel-description">
                                <div class="card-panel-text">商品总数</div>
                                <div class="card-panel-num">1035</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="6">
                    <el-card>
                        <div slot="header" class="clearfix">
                            <span>订单总数</span>
                        </div>
                        <div class="card-panel">
                            <div class="card-panel-icon">
                                <i class="el-icon-s-order"></i>
                            </div>
                            <div class="card-panel-description">
                                <div class="card-panel-text">订单总数</div>
                                <div class="card-panel-num">358</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="6">
                    <el-card>
                        <div slot="header" class="clearfix">
                            <span>用户总数</span>
                        </div>
                        <div class="card-panel">
                            <div class="card-panel-icon">
                                <i class="el-icon-user"></i>
                            </div>
                            <div class="card-panel-description">
                                <div class="card-panel-text">用户总数</div>
                                <div class="card-panel-num">125</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="6">
                    <el-card>
                        <div slot="header" class="clearfix">
                            <span>销售总额</span>
                        </div>
                        <div class="card-panel">
                            <div class="card-panel-icon">
                                <i class="el-icon-money"></i>
                            </div>
                            <div class="card-panel-description">
                                <div class="card-panel-text">销售总额</div>
                                <div class="card-panel-num">￥53,589</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-top: 20px;">
                <el-col :span="12">
                    <el-card>
                        <div slot="header" class="clearfix">
                            <span>最近一周销售趋势</span>
                        </div>
                        <div style="height:400px;">
                            <!-- 这里可以集成echarts图表 -->
                            <div class="chart-placeholder">销售趋势图表区域</div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="12">
                    <el-card>
                        <div slot="header" class="clearfix">
                            <span>商品分类占比</span>
                        </div>
                        <div style="height:400px;">
                            <!-- 这里可以集成echarts图表 -->
                            <div class="chart-placeholder">商品分类饼图区域</div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-top: 20px;">
                <el-col :span="24">
                    <el-card>
                        <div slot="header" class="clearfix">
                            <span>最近订单</span>
                        </div>
                        <el-table :data="recentOrders" style="width: 100%">
                            <el-table-column prop="id" label="订单号" width="180"></el-table-column>
                            <el-table-column prop="customer" label="客户名称" width="180"></el-table-column>
                            <el-table-column prop="date" label="下单时间"></el-table-column>
                            <el-table-column prop="amount" label="金额"></el-table-column>
                            <el-table-column prop="status" label="状态">
                                <template slot-scope="scope">
                                    <el-tag
                                        :type="scope.row.status === '已完成' ? 'success' : scope.row.status === '处理中' ? 'warning' : 'info'">
                                        {{ scope.row.status }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import productApi from '@/api/product'

export default {
    name: 'Dashboard',
    data() {
        return {
            isDev: process.env.NODE_ENV === 'development',
            menuIcons: {
                'settings': 'el-icon-setting',
                'user': 'el-icon-user',
                'role': 'el-icon-s-check',
                'configuration': 'el-icon-s-tools',
                'params': 'el-icon-s-operation',
                'dashboard': 'el-icon-s-home',
                'dict': 'el-icon-notebook-1',
                'dept': 'el-icon-office-building',
                'menu': 'el-icon-menu',
                'product': 'el-icon-goods',
                'category': 'el-icon-collection',
                'order': 'el-icon-s-order',
                'statistics': 'el-icon-data-line'
            },
            loading: {
                products: false,
                orders: false,
                users: false,
                sales: false
            },
            stats: {
                productCount: 0,
                orderCount: 0,
                userCount: 0,
                salesAmount: 0
            },
            recentOrders: [
                { id: 'ORD20230001', customer: '张三', date: '2023-06-15 14:30:25', amount: '￥1,299.00', status: '已完成' },
                { id: 'ORD20230002', customer: '李四', date: '2023-06-15 16:24:36', amount: '￥899.00', status: '处理中' },
                { id: 'ORD20230003', customer: '王五', date: '2023-06-16 09:15:44', amount: '￥2,580.00', status: '已完成' },
                { id: 'ORD20230004', customer: '赵六', date: '2023-06-16 10:37:52', amount: '￥399.00', status: '处理中' },
                { id: 'ORD20230005', customer: '孙七', date: '2023-06-16 13:25:18', amount: '￥1,680.00', status: '已取消' }
            ],
            error: null
        }
    },
    created() {
        // 初始化数据
        this.fetchData()
    },
    methods: {
        async fetchData() {
            // 这里可以加载实际数据
            console.log('加载仪表盘数据')
            this.fetchProductStats()
        },

        // 获取产品统计信息
        async fetchProductStats() {
            try {
                this.loading.products = true
                // 这里先用模拟数据，实际项目中应该调用API
                // const response = await productApi.getProductList({ pageSize: 1 })
                // if (response && response.data) {
                //     this.stats.productCount = response.data.total || 0
                // }

                // 模拟API延迟
                await new Promise(resolve => setTimeout(resolve, 500))
                this.stats.productCount = 1035
            } catch (error) {
                console.error('获取产品统计失败:', error)
                this.error = '加载产品数据失败'
            } finally {
                this.loading.products = false
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.dashboard {
    &-container {
        padding: 20px;
        background-color: #f0f2f5;
        min-height: calc(100vh - 50px);
    }

    &-content {
        width: 100%;
    }
}

.card-panel {
    display: flex;
    align-items: center;
    height: 108px;

    &-icon {
        font-size: 48px;
        padding: 0 20px;
        color: #409EFF;
    }

    &-description {
        margin-left: 15px;

        .card-panel-text {
            color: #666;
            font-size: 14px;
            margin-bottom: 12px;
        }

        .card-panel-num {
            font-size: 22px;
            font-weight: bold;
            color: #333;
        }
    }
}

.icon-list {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;

    .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 120px;
        height: 100px;
        margin: 5px;
        padding: 10px;
        border: 1px solid #eee;
        border-radius: 4px;

        i {
            font-size: 24px;
            margin-bottom: 8px;
            color: #409EFF;
        }

        .icon-name {
            font-size: 12px;
            color: #333;
            margin-bottom: 4px;
        }

        .icon-class {
            font-size: 10px;
            color: #999;
            word-break: break-all;
            text-align: center;
        }
    }
}

.chart-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #f9f9f9;
    color: #909399;
    font-size: 16px;
}
</style>